<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{num}}-{{flag}}</p>
    <!--在使用事件时候 如果只是简单的改变一个值 不用函数 可以直接改-->
    <button @click="num++">点我+1</button>
    <button @click="flag=true">点我+1</button>

    <!--条件渲染
        v-if="条件"  如果条件满足的 true 显示 不满足条件 flase 移除
    -->
    <h1 v-if="false">你好1</h1>
    <h1 v-if="true">你好2</h1>
    <h1 v-if="num == 0">你好3</h1>
    <h1 v-if="num === 1">你好4</h1>
    <h1 v-else-if="num === 2">你好4</h1>
    <h1 v-else>回家种地</h1>


    <!--v-show 满足条件显示 不满足隐藏-->
    <h1 v-show="num == 0">你好3</h1>

    <!--特殊用法-->
    <div v-show="num == 0">
    <h1>555</h1>
    <h1>666</h1>
    <h1>777</h1>
    </div>

    <!--模版标签提供多个共同操作 起到包裹的作用 翻译到页面没有多余 结构-->
    <template v-show="num == 0">
        <h1>555</h1>
        <h1>666</h1>
        <h1>777</h1>
    </template>

</div>

</body>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                num:0,
                flag:false
            }
        },
        //函数定义的位置
        methods:{

        }
    });

</script>
</html>